body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{"Arial, Helvetica, sans-serif",HELVETICA;background: #f8f8f8;-webkit-text-size-adjust:100%;}
a{color:#4eb1f4;text-decoration:none}
a:hover{color:#4eb1f4;text-decoration:none}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

.clear{ clear: both; }
.hide{ display: none; }
.chat_item_active{ background: #e9e9e9; }

input[type=text], input[type=button], input[type=password]{ box-sizing: border-box; font-size: 14px; padding: 0 4px; display: inline-block; margin: 10px auto 0;
    width: 300px; height: 36px; line-height: 36px; cursor: pointer; border-radius: 2px; border: 1px solid #e5e5e5;
    -webkit-tap-highlight-color: transparent; }

textarea { box-sizing: border-box; font-size: 14px; padding: 0 4px; display: inline-block; margin: 10px auto 0;
    width: 300px; height: 160px; border-radius: 2px; border: 1px solid #e5e5e5;
    -webkit-tap-highlight-color: transparent; background-color: white; }

.panel{ position: absolute; top: 10%; bottom: 10%; margin: auto; width:100%; }
.panel .sign{ overflow: hidden; width: 400px; margin: 40px auto; text-align: center;　border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px;　border: 0px none black;　-webkit-tap-highlight-color: transparent;
    background-color: white; padding: 30px 0; }

/*Login & register*/
.btn_info{ border: 1px solid #4eb1f4; background: #4eb1f4; color: #fff; margin-top: 30px; }
.panel .sign .notice{ font-size: 14px; margin-top: 10px; }

/*panel*/
.chat{ position: relative; max-width: 1024px; min-width: 960px; max-height: 600px; height: 100%; margin: auto;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px; border: 0px none black; -webkit-tap-highlight-color: transparent;
    background-color: white; border-radius: 2px; overflow: hidden; }
.left_bar{ position: relative; float: left; width: 50px; height: 100%; text-align: center; border-radius: 2px 0px 0px 2px;
    border: 1px solid #f2f2f2; -webkit-tap-highlight-color: transparent; background-color: #fcfdfb;}
.left_bar span{ color: #ccc; cursor: pointer; }
.left_bar .chat_items .action{ color: #4eb1f4 }
.left_bar span:hover{ color: #4eb1f4 }
.head-info { margin-top: 10px; cursor: pointer; }
.head-info img{ width: 30px; height: 30px; border-radius: 50px; }
.username{ font-size: 12px; width: 100%; overflow: hidden; margin-top: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat_items { margin: 50px 0; }
.chat_items li{ margin-top: 20px; font-size: 25px; display: inline-block; position: relative; }
.chat_items li .prompt{ background: #f00; border-radius: 50%; width: .4em; height: .4em; top: -5px; left: -8px;
    position:absolute; }
.set{ position: absolute; bottom: 10px; text-align: center; font-size: 25px; width: 100%; -webkit-user-select:none;
    -moz-user-select:none; -ms-user-select:none; user-select:none; cursor: pointer; }
.chat_dom{ float: left; width: 250px; height: 100%; }
.chat_list{ width: 250px; height: calc(100% - 50px); border-right: 1px solid #f2f2f2; overflow-y: scroll; }
#search_bar{ margin: 7px 0; width: 200px; margin-left: 15px; }
.search_dom{ overflow-y: scroll; width: 250px; }
.chat_obj{ height: 40px; padding: 5px 0; cursor: pointer; position: relative; }
.chat_obj .prompt{ background: #f00; border-radius: 50%; width: .5em; height: .5em; top: .5em; left: .5em;
    position:absolute; }
.chat_obj:hover{ background: #e9e9e9; }
.chat_obj .obj_name{ font-size: 14px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat_obj .obj_sign{ font-size: 12px; color: #888; margin-top: 5px; padding-right: 5px; display:block; word-break:keep-all;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat_obj .obj_sign img{ width: 16px; height: 16px; }
.chat_obj .head_pic { float: left; }
.chat_obj .head_pic img{ width: 40px; height: 40px; border-radius: 50px; margin: 0 10px; }
.chat_panel{ position: relative; float: left; height: 100%; width: calc(100% - 303px); color: #333; }
.top_bar{ text-align: center; height: 40px; line-height: 40px; font-size: 14px; position: relative; }
.top_bar .obj_info{ width: 200px; margin: auto; position: relative; }
.top_bar .obj_info .show_list{ cursor: pointer; display: none; }
.top_bar .obj_name{ display: inline-block; font-weight: bold; word-break:keep-all; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; width: 160px; float: left; }
.top_bar .obj_list{ position: absolute; right: 0; margin: auto; padding: 10px 7px; border-radius: 2px;
    width: 200px; overflow: auto; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px; z-index: 2; background: #fff;
    max-height: 300px; }
.top_bar .obj_list .user_info{ width: 150px; float: left; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.top_bar .obj_list .option{ width: 20px; float: right; cursor: pointer; }
.top_bar .obj_list li{ padding: 0 5px; box-sizing: border-box;
    text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top_bar .obj_list img{ width: 30px; height: 30px; margin-right: 5px; border-radius: 50%; }
.top_bar span{ margin-left: 15px; color: #ccc; position: relative; bottom: 3px; }
.top_bar .top_conf{ position: absolute; right: 15px; top: 0; font-size: 25px; width: 25px; height: 25px; }
.top_bar .top_conf span{ display: none; }
.top_bar .top_conf span:hover{ color: #4eb1f4; }
.top_bar .top_conf .top_conf_menu{ position: absolute; font-size: 14px; width: 160px; z-index: 99; right: 15px; top: 5px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px; background-color: #fff; display: none; }
.top_bar .top_conf .top_conf_menu li{ height: 30px; line-height: 30px; cursor: pointer; overflow: hidden;
    text-align: left; padding: 0 5px; }
.top_bar .top_conf .top_conf_menu li:hover{ background: #f2f2f2; }
.chat_content{ height: 75%; }
.chat_content .chat_action{ height: calc(100% - 40px); overflow-y: scroll; overflow-x: hidden;
    border-bottom: 1px solid #f2f2f2;  }
/*收到消息显示样式*/
.chat_get{ max-width: 100%; padding: 10px; height: auto; }
.chat_get .head_pic { float: left; }
.chat_get .head_pic img{ width: 40px; height: 40px; }
.chat_get .chat_name{ font-size: 14px; float: left; padding: 0 5px; color: #adadad; }
.chat_get .chat_time{ font-size: 14px; padding: 0 5px; color: #adadad; }
.chat_get .chat_pop{ background-color: #f1f2ec; max-width: calc(100% - 80px); min-width: 10%; float: left;
    margin: 5px 10px; padding: 5px; border-radius: 5px; position: relative; min-height: 19px; }
.chat_get .chat_triangle{ width: 0; height: 0; border-top: 5px solid transparent; border-right: 8px solid #f1f2ec;
    border-bottom: 5px solid transparent; position: absolute; left: -8px; }
.chat_get .chat_con{ font-size: 14px; width: auto; word-break: break-all; }
.chat_get .chat_con img{ max-width: 300px; }
/*发送消息的显示样式*/
.chat_send{ max-width: 100%; padding: 10px; height: auto; }
.chat_send .head_pic { float: right; }
.chat_send .head_pic img{ width: 40px; height: 40px; }
.chat_send .chat_name{ font-size: 14px; float: right; padding: 0 5px; color: #adadad; }
.chat_send .chat_time{ font-size: 14px; padding: 0 5px; color: #adadad; text-align: right; }
.chat_send .chat_pop{ background-color: #b4e4ff; max-width: calc(100% - 80px); min-width: 10%; float: right;
    margin: 5px 10px; padding: 5px; border-radius: 5px; position: relative; text-align: right; min-height: 19px; }
.chat_send .chat_pop .load{ position: absolute; left: -25px; top: 2px; }
.chat_send .chat_triangle{ width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #b4e4ff;
    border-bottom: 5px solid transparent; position: absolute; right: -8px; }
.chat_send .chat_con{ font-size: 14px; word-break: break-all; text-align: right; }
.chat_send .chat_con img{ max-width: 300px; }

.chat_con .face_img{ width: 25px; height: 25px; }
.chat_con .face_img_big{ width: auto; height: auto; }
.chat_con audio{ display: none; }
.chat_con .play_audio{ height: 20px; cursor: pointer; }
.chat_con .play_audio .time_long{ position: absolute; right: -30px; font-size: 12px; color: #999; }
.chat_con .play_audio img{ height: 20px; }

/*聊天编辑区域*/
.chat_area{ height: 30px; width: 100%; line-height: 30px; font-size: 20px; }
.tool_bar { width: 100%; z-index: 1; height: 30px; line-height: 30px; }
.tool_bar li{ margin-left: 10px; display: inline-block; color: #ccc; position: relative; }
.tool_bar li:hover{ color: #4eb1f4; }
.chat_area textarea{ position: absolute; height: 60px; border: none; width: calc(100% - 30px); padding: 10px 15px;
    outline: none; resize: none; overflow: hidden; word-break: break-all; }
.chat_area button{ position: absolute; bottom: 5px; right: 5px; padding: 0 25px; font-size: 12px;
    border: 1px solid #4eb1f4; background: #4eb1f4; color: #fff; height: 30px; line-height: 30px; }
/*表情*/
.face_chose { z-index: 1; position: absolute; width: 270px; height: 194px; bottom: 30px; left: -120px; border-radius: 2px;
    background: #fff; box-sizing: border-box; padding: 4px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 12px 0px; }
.face_chose li{ cursor: pointer; display: inline-block; margin: 5px 6px 0 6px; text-align: center; }
.face_chose li img{ width: 25px; height: 25px; margin-top: 3px; }
/*大图表情*/
.face_chose_big { z-index: 1; position: absolute; width: 270px; height: 194px; bottom: 30px; left: -90px; border-radius: 2px;
    background: #fff; box-sizing: border-box; padding: 4px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 12px 0px; }
.face_chose_big li{ cursor: pointer; display: inline-block; margin: 5px 6px 0 6px; text-align: center; }
.face_chose_big li img{ width: 40px; height: 35px; margin-top: 3px; }
/*设置面板*/
.cog_menu{ z-index: 1; position: absolute; text-align: left; left: 40px; bottom: 10px; width: 160px; display: none;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 6px 0px; background-color: #fff; font-size: 14px; }
.cog_menu li{ padding: 5px 10px; }
.cog_menu li:hover{ background: #f2f2f2; }
.cog_menu li span{ margin-right: 10px; }

/*文件选择input*/
#send_image{ display: none; }
/*聊天面板遮罩层*/
.chat_shade{ position: absolute; width: 100%; height: 100%; left: 0; top:0; background: #f2f2f2; z-index: 10; text-align: center; }
.chat_shade h2{ margin-top: 30%; }
.chat_shade .notice{ margin-top: 20px; }
/*图片查看器样式*/
#image_view_floor{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.75);
    text-align: center; display:table-cell; z-index: 99; }
#image_view_floor p{ height: 100%; display: inline-block; vertical-align:middle; }
#image_view_floor img{ vertical-align:middle; max-height: 100%; }